<template>
    <div class="index hasFoot">
        <HeaderNav3 :activeIndex="activeIndex"></HeaderNav3>
        <Banner></Banner>
        <Contact></Contact>
        <div class="search-item">
               <div class="wrap">
                   <p>
                       搜索你感興趣的樓盤
                   </p>
                   <div class="index-search">
                        <input type="text" maxlength="15" placeholder="輸入樓盤名稱的關鍵字" @input="search" v-model="searchVal">
                        <div class="search-btn" @click="searchGo">
                           搜索
                        </div>
                        <ul class="search-tap" v-show="searchTap">
                            <li  :key="memory" v-for="m in  memory">
                               <a @click="searchTapGo(m)">
                                   {{m.post_title}}
                               </a> 
                            </li>
                           
                        </ul>
                   </div>
               </div>
        </div>
        <div class="item wrap">
                    <p>
                        網友熱論樓盤
                    </p>
                    <div class="item-img">
                         <router-link  :to="{path:'/HousingDetails',query:{id:hot.id}}" :key="hot" v-for="hot in hots">
                              <img :src="hot.more" >
                              <span>{{hot.post_title}}</span>
                        </router-link>

                    </div>
                    <router-link class="btn" to="/allHouses">
                        查看更多
                    </router-link>
                    <div class="item-hr">
                        
                    </div>
        </div>
        <div class="item wrap">
                    <p>
                        熱門成交樓盤
                    </p>
                    <div class="item-img">
                         <router-link  :to="{path:'/HousingDetails',query:{id:deal.id}}":key="deal" v-for="deal in deals">
                              <img :src="deal.more" >
                              <span>{{deal.post_title}}</span>
                        </router-link>
                    </div>
                    <router-link class="btn" to="/allHouses">
                        查看更多
                    </router-link>
                    <div class="item-hr">
                        
                    </div>
        </div>
        <div class="company-banner wrap">
                <p>
                    推薦公司
                </p>
                <ul class="companyImg">
                    <li :key="companys" v-for="c in companys">
                        <a :href="c.url" target="_blank">
                            <img :src="c.image">
                        </a>
                    </li>
                </ul>
        </div> 
    </div>
        
</template>

<script>
import Banner from '@/components/Banner.vue'
import Contact from '@/components/Contact.vue'
import HeaderNav3 from "@/components/HeaderNav3.vue"
import { V1_ESTATE_LIST ,V1_LINKS} from "@/config/api"
import $ from "../../static/js/jquery.min"
export default {
	components:{
        Banner,
        Contact,
        HeaderNav3
	},
    methods:{
        search(){
            //todo 记忆搜索
            if(this.searchVal.length>0){
                this.searchTap=true;
            }else{
                this.searchTap=false;
            }
            this.$http.get(V1_ESTATE_LIST+0+"/"+encodeURI(this.searchVal)+"/"+0+"/"+9,{
            }).then(res=>{
                if(res.data.success){
                        this.memory=res.data.infor.listItems
                    }
               })
        },
        searchGo(){
           this.$router.push({
                path:"/allHouses",
                query:{
                    type:0,
                    keyword:encodeURI(this.searchVal),
                    page:0,
                    page_size:9,
                    search:true,
                }
           })    
        },
        searchTapGo(m){
            this.$router.push({
                path:"/allHouses",
                query:{
                    type:0,
                    keyword:encodeURI(m.post_title),
                    page:0,
                    page_size:9,
                    search:true,
                }
           })    
        }
    },
    data(){
        /*
                1、type: 0：不分类
                         1：网友热论
                         2：热门成交
                2、keyword：按关键词搜索
                3、page：当前列表翻页索引
                4、page_size：定义列表页面数量大小
             */
            //網友熱論樓盤
            this.$http.get(V1_ESTATE_LIST+1+"/"+0+"/"+0+"/"+0,{
            }).then(res=>{
                if(res.data.success){
                    this.hots=res.data.infor.listItems;
                }
            })
            // 熱門成交樓盤
            this.$http.get(V1_ESTATE_LIST+2+"/"+0+"/"+0+"/"+0,{
            }).then(res=>{
                if(res.data.success){
                    this.deals=res.data.infor.listItems;
                }
            })
            //推荐公司
            this.$http.get(V1_LINKS,{
            }).then(res=>{
                if(res.data.success){
                    this.companys=res.data.infor;
                }
            })

        return{
            "hots":[],
            "deals":[],
            "companys":[],
            "searchTap":false,
            "searchVal":"",
            "memory":"",
            "activeIndex":"1",
        }
    },
    activated(){ 
        this.$store.commit("IS_SHOW_ALERT",true)
    },
    mounted(){ 
       
    },
}
</script>

<style lang="scss">
    @import "../style/index";
</style>